<!--
 * @author: Goalias
 * @since: 2024-12-21
-->
<script setup lang="ts">
import AdminCard from '@/components/home/AdminCard.vue';
import { chatApi } from '@/apis/ChatApi';
import PulsatingButton from '@/components/ui/pulsating-button';
import { CoffeeCup, Sugar } from '@element-plus/icons-vue';
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { articleApi } from '@/apis/ArticleApi';
import type { ArticleView, QueryArticle } from '@/apis/types/Article';
import LandscapeCard from '@/components/home/LangScapeCard.vue';
import { ElMessage } from 'element-plus';
import ArticleDetail from '@/components/home/ArticleDetail.vue';
const isCheerDisabled = ref(false);
const isKnowledgeDisabled = ref(false);

const cheerCountdown = ref(5);
const knowledgeCountdown = ref(5);
console.clear();
async function getDailyCheers() {
	chatApi.getCheerWord().then((res) => {
		if (res.code == 200) {
			ElNotification({
				title: '<每日激励>',
				position: 'bottom-left',
				duration: 0,
				type: 'success',
				message: res.data,
			});
		} else {
			ElNotification({
				title: '<每日激励>',
				position: 'bottom-left',
				duration: 0,
				type: 'error',
				message: res?.msg || '获取激励失败',
			});
		}
	});
}

async function getDailyKnowledge() {
	chatApi.getKnowledgeWord().then((res) => {
		if (res.code == 200) {
			ElNotification({
				title: '<每日知识>',
				position: 'bottom-left',
				duration: 0,
				type: 'success',
				message: res.data,
			});
		} else {
			ElNotification({
				title: '<每日知识>',
				position: 'bottom-left',
				duration: 0,
				type: 'error',
				message: res?.msg || '获取知识失败',
			});
		}
	});
}

function handleClick(type: string) {
	if (type == 'inspiration') {
		getDailyCheers();
		isCheerDisabled.value = true;
		cheerCountdown.value = 5;
		const interval = setInterval(() => {
			cheerCountdown.value -= 1;
			if (cheerCountdown.value <= 0) {
				clearInterval(interval);
				isCheerDisabled.value = false;
			}
		}, 1000);
	} else if (type == 'knowledge') {
		getDailyKnowledge();
		isKnowledgeDisabled.value = true;
		knowledgeCountdown.value = 5;
		const interval = setInterval(() => {
			knowledgeCountdown.value -= 1;
			if (knowledgeCountdown.value <= 0) {
				clearInterval(interval);
				isKnowledgeDisabled.value = false;
			}
		}, 1000);
	}
}

const articlesHots = ref<ArticleView[]>([]);
const timeArticles = ref<ArticleView[]>([]);
const loading = ref(false);
let articleId = ref();

const getHotArticles = async () => {
	try {
		loading.value = true;
		const res = await articleApi.getHotList();
		articlesHots.value = res.data.hotArticles;
		timeArticles.value = res.data.timeArticles;
	} catch (error) {
		ElMessage.error('获取主页文章失败');
	} finally {
		loading.value = false;
	}
};
const getArticleDetail = (id: number) => {
	articleId.value = id;
	showDetail.value = true;
};

let showDetail = ref(false);

// 获取悬浮卡片中文章集合的id
let homeTitle = ref('热门文章');
const getCategoryId = async (payload: { id: number; name: string }) => {
	listParams.value.categoryId = payload.id;
	homeTitle.value = payload.name;
	showDetail.value = false;
	await getList();
};
const getTagId = async (payload: { id: number; name: string }) => {
	listParams.value.tagId = payload.id;
	homeTitle.value = payload.name;
	showDetail.value = false;
	await getList();
};
const getArticleId = (val: number) => {
	getArticleDetail(val);
};
const listParams = ref<QueryArticle>({
	pageNum: 0,
	pageSize: 10,
	categoryId: null,
	tagId: null,
	date: null,
	status: '0',
});
const currentListParams = ref<QueryArticle>({
	pageNum: 0,
	pageSize: 10,
	categoryId: null,
	tagId: null,
	date: null,
	status: '0',
});
const getList = async () => {
	let res = await articleApi.getList(listParams.value);
	articlesHots.value = res.data.recordList;
	currentListParams.value = listParams.value;
	emptyListParams();
	return res;
};
const emptyListParams = () => {
	listParams.value.tagId = null;
	listParams.value.categoryId = null;
	listParams.value.date = null;
};
let isCheerHidden = ref(false);
let isKnowledgeHidden = ref(false);

const closeButtonRef1 = ref<HTMLElement | null>(null);
const closeButtonRef2 = ref<HTMLElement | null>(null);

// 封装处理按钮颜色的函数
const updateButtonColor = (
	buttonRef: HTMLElement | null,
	event: MouseEvent
) => {
	if (buttonRef) {
		const rect = buttonRef.getBoundingClientRect();
		const buttonCenterX = rect.left + rect.width / 2;
		const buttonCenterY = rect.top + rect.height / 2;

		const distance = Math.sqrt(
			Math.pow(event.clientX - buttonCenterX, 2) +
				Math.pow(event.clientY - buttonCenterY, 2)
		);

		if (distance < 40) {
			buttonRef.style.color = 'white'; // 显示颜色
		} else {
			buttonRef.style.color = 'transparent'; // 隐藏颜色
		}
	}
};

const handleMouseMove = (event: MouseEvent) => {
	updateButtonColor(closeButtonRef1.value, event); // 更新第一个按钮颜色
	updateButtonColor(closeButtonRef2.value, event); // 更新第二个按钮颜色
};

onMounted(() => {
	getHotArticles();
	window.addEventListener('mousemove', handleMouseMove);
});

onUnmounted(() => {
	window.removeEventListener('mousemove', handleMouseMove);
});
</script>

<template>
	<div class="home-container" id="home-container">
		<div class="main-container">
			<AdminCard
				@getCategoryId="getCategoryId"
				@getTagId="getTagId"
				@get-article-id="getArticleId"
				class="admin-card"
			/>
			<div class="main">
				<div class="home-title" v-if="!showDetail">
					📋 {{ homeTitle }} 📋
				</div>
				<div class="article-cards" v-if="!showDetail">
					<LandscapeCard
						v-for="article in articlesHots"
						:article="article"
						@articleId="getArticleDetail"
					></LandscapeCard>
				</div>
				<div class="article-detail" v-if="showDetail">
					<ArticleDetail
						:articleId="articleId"
						:currentListParams="currentListParams"
					></ArticleDetail>
				</div>
			</div>
		</div>
		<h2 class="form-title" v-if="!showDetail">📜 最新发布 📜</h2>
		<div class="time-cards" v-if="!showDetail" style="margin-top: 20px">
			<article-card
				v-for="article in timeArticles"
				:article="article"
				@articleId="getArticleDetail"
			/>
		</div>
		<div class="float-home" v-if="showDetail" @click="showDetail = false">
			<HomeBtn></HomeBtn>
		</div>
		<div class="daily-card">
			<PulsatingButton
				v-if="!isCheerHidden"
				pulseColor="var(--theme-color)"
				duration="2s"
				class="daily-cheers"
				@click="handleClick('inspiration')"
				:disabled="isCheerDisabled"
				type="button"
			>
				<div class="daily-cheers-text">
					<el-icon><CoffeeCup /></el-icon>
					{{
						isCheerDisabled
							? `每日激励 (${cheerCountdown})`
							: '每日激励'
					}}
				</div>
				<button
					class="close-button"
					v-if="!isCheerHidden"
					ref="closeButtonRef1"
					@click="
						(event) => {
							event.stopPropagation();
							isCheerHidden = true;
						}
					"
				>
					X
				</button>
			</PulsatingButton>

			<PulsatingButton
				v-if="!isKnowledgeHidden"
				pulseColor="var(--theme-color)"
				duration="2s"
				class="daily-laugh"
				@click="handleClick('knowledge')"
				:disabled="isKnowledgeDisabled"
				type="button"
			>
				<div class="daily-laugh-text">
					<el-icon><Sugar /></el-icon>
					{{
						isKnowledgeDisabled
							? `每日知识 (${knowledgeCountdown})`
							: '每日知识'
					}}
				</div>
				<button
					class="close-button"
					v-if="!isKnowledgeHidden"
					ref="closeButtonRef2"
					@click="
						(event) => {
							event.stopPropagation();
							isKnowledgeHidden = true;
						}
					"
				>
					X
				</button>
			</PulsatingButton>
		</div>
	</div>
</template>

<style scoped lang="less">
.home-container {
	padding: 20px;
	box-sizing: border-box;
	position: relative;
	.main-container {
		display: flex;
		justify-content: space-around;
		padding: 20px;
		gap: 20px;
		// .admin-card {
		// }
		.main {
			flex: 1;
			position: relative;
			// 左侧卡片宽335px
			.article-cards {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				gap: 20px;
				.article-card-container {
					width: 100%;
					max-width: none;

					// border: solid 5px transparent;
					// overflow: hidden;
					// transition: all 0.3s;
					// &:hover {
					// 	border: none;
					// }
				}
			}
		}
	}
	.form-title {
		color: #303133;
		margin: 0 5px;
		font-size: 2rem;
		text-align: center;
		font-weight: 600;
		background: linear-gradient(135deg, #409eff 0%, #ff80f0 100%);
		border-radius: 3vw;
		color: #f2c05d;
	}
	.time-cards {
		position: relative;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.article-card-container {
			width: 25%;
			border: solid 5px transparent;
			overflow: hidden;
			border-radius: 15px;
			transition: all 0.3s;
			&:hover {
				border: none;
			}
		}
	}

	.daily-cheers {
		color: var(--theme-color);
		font-size: 20px;
		max-width: 40px;
		margin-left: 1vw;
	}

	.daily-laugh {
		color: var(--theme-color);
		font-size: 20px;
		margin-top: 10vh;
		max-width: 40px;
		margin-left: 1vw;
	}

	.daily-cheers[disabled],
	.daily-laugh[disabled] {
		cursor: not-allowed;
	}

	.close-button {
		position: absolute;
		// left: 50%;
		top: -5%;
		right: -35%;
		// transform: translate(-50%, 0);
		background: none;
		border: none;
		color: transparent;
		cursor: pointer;
		margin-left: 10px;
		font-size: 10px;
		transition: color 0.3s;
		&:hover {
			color: white;
		}
	}
}

.home-title {
	font-size: 1.2rem;
	text-align: start;
	padding-bottom: 10px;
	position: absolute;
	top: -32px;
	color: #303133;
	font-weight: 600;
	color: #f2c05d;
}
.float-home {
	position: fixed;
	top: 11vh;
	right: 1vw;
	z-index: 2000;
}
.daily-card {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 1000;
	/* 确保组件在其他元素之上 */
}
@media screen and (max-width: 768px) {
	.admin-card {
		display: none;
	}
}
</style>
